<!-- 通用查询组件 -->
<template>
  <div class="commonSearch">
    <el-form class="searchForm" ref="searchForm" inline :label-width="labelWidth" :model="searchValues" @submit.native.prevent>
      <template v-for="item in config">
        <template v-if="item.type === 'input'">
          <el-form-item :label="item.label" :prop="item.vmodel" :key="item.label">
            <el-input
              v-model.trim="searchValues[item.vmodel]"
              :placeholder="item.placeholder || '请输入'"
              clearable
              class="inputsize"
              @keyup.enter.native="search"
            ></el-input>
          </el-form-item>
        </template>

        <template v-if="item.type === 'select'">
          <el-form-item :label="item.label" :prop="item.vmodel" :key="item.label">
            <el-select
              v-model="searchValues[item.vmodel]"
              :filterable="item.filterable"
              :clearable="item.clearable"
              :multiple="item.multiple"
              :collapse-tags="item.multiple"
              :placeholder="item.placeholder || '请选择'"
              class="inputsize"
            >
              <template v-for="op in item.options">
                <el-option :label="op[item.optionsLabel]" :value="op[item.optionsValue]" :key="op.id"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </template>

        <template v-if="item.type === 'cascader'">
          <el-form-item :label="item.label" :prop="item.vmodel" :key="item.label">
            <el-cascader
              v-model="searchValues[item.vmodel]"
              :options="item.options"
              :props="{ expandTrigger: 'click', value: item.optionsValue, label: item.optionsLabel, checkStrictly: true }"
              :clearable="false"
              filterable
              :placeholder="item.placeholder || '请选择'"
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
        </template>

        <template v-if="item.type === 'single-date'">
          <el-form-item :label="item.label" :prop="item.vmodel" :key="item.label">
            <el-date-picker
              v-if="item.picker.type !== 'year'"
              :type="item.picker ? item.picker.type : 'date'"
              v-model="searchValues[item.vmodel]"
              :placeholder="item.placeholder || '请选择'"
              class="inputsize"
              :clearable="false"
              :format="item.picker ? item.picker.format : 'yyyy-MM-dd'"
              :valueFormat="item.picker ? item.picker.format : 'yyyy-MM-dd'"
              :key="item.picker ? item.picker.type : 'date' + item.label"
            ></el-date-picker>
            <el-date-picker
              v-else
              type="year"
              v-model="searchValues[item.vmodel]"
              :placeholder="item.placeholder || '请选择'"
              class="inputsize"
              :clearable="false"
              :key="item.picker ? item.picker.type : 'date' + item.label"
            ></el-date-picker>
          </el-form-item>
        </template>

        <template v-if="item.type === 'double-date'">
          <el-form-item :label="item.label" :prop="item.vmodel" :key="item.label">
            <el-date-picker
              :type="item.picker ? item.picker.type : 'daterange'"
              v-model="searchValues[item.vmodel]"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :format="item.picker ? item.picker.format : 'yyyy-MM-dd'"
              :valueFormat="item.picker ? item.picker.format : 'yyyy-MM-dd'"
              :picker-options="item.picker && item.picker.pickerOptions ? item.picker.pickerOptions : {}"
              :key="item.picker ? item.picker.type : 'date' + item.label"
              :clearable="false"
              style="width: 380px;"
            >
            </el-date-picker>
          </el-form-item>
        </template>
      </template>
      <el-form-item>
        <el-button type="primary" size="mini" class="queryBtn" icon="el-icon-search" @click="search">查询</el-button>
        <el-button type="primary" size="mini" class="resetBtn" icon="el-icon-refresh-right" @click="queryClear">重置</el-button>
        <el-button type="primary" size="mini" class="exportBtn" icon="el-icon-download" v-if="hasExport" @click="btnClick('export')">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="btns">
      <el-button
        v-for="item in btnList"
        :key="item.eventName"
        class="resetBtn"
        type="primary"
        size="mini"
        :icon="item.icon"
        @click="btnClick(item.eventName)"
      >
        {{ item.resName }}
      </el-button>
    </div>
  </div>
</template>

<script>
import EventBus from '@/_utils/EventBus'

export default {
  name: 'CommonSearch',
  props: {
    searchConfig: {
      type: Array,
      default: () => {
        return []
      }
    },
    searchValues: {
      type: Object,
      default: () => {}
    },
    btnList: {
      type: Array,
      default: () => {
        return []
      }
    },
    labelWidth: {
      type: String,
      default: () => {
        return '100px'
      }
    },
    hasExport: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      config: []
    }
  },
  watch: {
    searchValues: {
      handler() {
        EventBus.$emit('searchValues', this.searchValues)
      },
      deep: true
    },
    searchConfig: {
      handler(val) {
        if (val.length > 0) this.config = this.searchConfig
      },
      deep: true
    }
  },
  // created() {
  //   if (this.searchConfig.length > 0) this.config = this.searchConfig
  // },
  methods: {
    search() {
      // 查询
      this.$emit('searchFun', this.searchValues)
      EventBus.$emit('searchValues', this.searchValues)
    },
    queryClear() {
      // 重置
      Object.keys(this.searchValues).forEach(key => (this.searchValues[key] = null))
      this.$emit('searchFun')
      EventBus.$emit('searchValues', this.searchValues)
    },
    btnClick(flag) {
      // 导出
      this.$emit('btnClick', flag)
      EventBus.$emit('searchValues', this.searchValues)
    }
  }
}
</script>

<style lang="scss" scoped>
.commonSearch {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  .inputsize {
    width: 210px;
  }
  /deep/ .el-form .el-select .el-input,
  /deep/ .el-form .el-cascader .el-input {
    width: 160px;
  }
  /deep/ .el-select,
  /deep/ .el-cascader {
    width: fit-content;
  }
}
</style>
